<template>
	<view>

		<!-- 顶部导航兰 -->
		<view style="width: 100vw;height:8vh;background-color: #fff;display: flex;justify-content: space-around;">
			<!-- 渲染顶部导航栏数据1 -->
			<view style="height: 8vh;line-height: 8vh;" v-for="(item,index) in topTypeList" :key="index"
				:class="purchase-center-TopType" @click="TypeBtn(index)">
				{{item}}
			</view>
		</view>
		<!-- 列表渲染 -->
		<view style="width: 94vw;margin-left: 3vw;background-color: #fff;margin-top: 2vh;border-radius: 15px;">
			<!-- 渲染 -->
			<view style="width: 94vw;margin-top: 1vh;" v-for="(item,index) in ordeList" :key="index">
				<!-- 支付状态 -->
				<view
					style="border-top: solid 1px #ccc; width: 94vw;height: 5vh;background-color: #FFFFFF;color:#F3A73F; text-align: center;font-size: 0.7rem; line-height: 5vh;">
					<text v-if="item.state==0">交易成功</text>
					<text v-if="item.state==1">买家未付款</text>
					<text v-if="item.state==2">商家未发货</text>
					<text v-if="item.state==3">正在申请售后</text>
					<text v-if="item.state==4">商家正在处理</text>
					<text v-if="item.state==5">商家已发货</text>
				</view>
				<!-- 内容布局 -->
				<view style="width: 94vw;height: 13vh;display: flex;">
					<view style="width: 25vw;height: 13vh;">
						<image :src="item.image" mode="" style="width: 20vw;height: 12vh;margin-left: 2vw;"></image>
					</view>
					<!-- 简介内容 -->
					<view style="width: 45vw;height: 6vh;">
						<!-- 简介渲染 -->
						<view
							style="width: 45vw;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;">
							{{item.content}}
						</view>
						<!-- 七天无理由退货 -->
						<view
							style="width: 15vw;height: 4vh;color:#ff9952 ;font-size: 0.8rem; margin-top: 1vh;border-radius: 8px;">
							七天无理由退款
						</view>
					</view>
					<!-- 价格 -->
					<view style="width: 23vw;height: 13vh;">
						<!-- 价格 -->
						<view style="width: 23vw;height: 4vh;text-align: right">
							￥{{item.price}}
						</view>
						<!-- 数量 -->
						<view style="width: 23vw;height: 4vh;text-align: right">
							*{{item.num}}
						</view>
						<!-- 状态 -->
						<view
							style="width: 23vw;height: 3vh;color:#F3A73F; text-align: center;font-size: 0.7rem; line-height: 5vh;text-align: right;">
							<text v-if="item.state==0">交易成功</text>
							<text v-if="item.state==1">买家未付款</text>
							<text v-if="item.state==2">商家未发货</text>
							<text v-if="item.state==3">退货退款中</text>
							<text v-if="item.state==4">商家正在处理</text>
							<text v-if="item.state==5">商家已发货</text>
						</view>
					</view>

				</view>
				<!-- 支付详情 -->
				<view style="width: 60vw;margin-left: 10vw; height: 4vh;display: flex;line-height: 4vh;">
					<view style="width: 20vw;height: 5vh;color: #999999;font-size: 0.7rem;">
						总价￥{{item.num*1*item.price*1}}
					</view>
					<view style="width: 20vw;height: 5vh;color: #999999;font-size: 0.7rem;">
						优惠￥{{item.preference}}
					</view>
					<view style="width: 20vw;height: 5vh;font-size: 0.7rem;">
						实际￥{{item.num*1*item.price*1-item.preference}}
					</view>
				</view>
				<!-- 支付状态 -->
				<view v-if="item.state==1"
					style="margin-left: 70vw; width: 20vw;height: 4vh;background-color: #ff9900;border-radius: 15px;color: #fff;text-align: center;line-height: 4vh;font-size: 0.6rem;">
					继续支付
				</view>
				<!-- 交易成功 -->
				<view v-if="item.state==0"
					style="margin-left: 20vw; width: 70vw;height: 4vh;display: flex;justify-content: space-around;">
					<text
						style=" width: 20vw;height: 4vh;border: solid 1px #F0AD4E;color: #F0AD4E; border-radius: 15px;text-align: center;line-height: 4vh;font-size: 0.6rem;">
						售后申请
					</text>
					<text @click="successBtnlogistics(index)"
						style=" width: 20vw;height: 4vh;border: solid 1px #F0AD4E; color: #F0AD4E; border-radius: 15px;text-align: center;line-height: 4vh;font-size: 0.6rem;">
						查看物流
					</text>
					<text @click="toComment(index)"
						style=" width: 20vw;height: 4vh;background-color: #ff9900;border-radius: 15px;color: #fff;text-align: center;line-height: 4vh;font-size: 0.6rem;">
						评价
					</text>
				</view>
				<!-- 商家已发货 -->
				<view v-if="item.state==5"
					style="margin-left: 20vw; width: 70vw;height: 4vh;display: flex;justify-content: space-around;">
					<text
						style=" width: 20vw;height: 4vh;border: solid 1px #F0AD4E;color: #F0AD4E; border-radius: 15px;text-align: center;line-height: 4vh;font-size: 0.6rem;">
						售后申请
					</text>
					<text @click="sendShoptnlogistics(index)"
						style=" width: 20vw;height: 4vh;border: solid 1px #F0AD4E; color: #F0AD4E; border-radius: 15px;text-align: center;line-height: 4vh;font-size: 0.6rem;">
						查看物流
					</text>
					<text @click="receiveBtn(index)"
						style=" width: 20vw;height: 4vh;background-color: #ff9900;border-radius: 15px;color: #fff;text-align: center;line-height: 4vh;font-size: 0.6rem;">
						确认收货
					</text>
				</view>
				<!-- 售后正在申请 -->
				<view v-if="item.state==3"></view>
				<!-- 商家未发货 -->
				<view v-if="item.state==2"
					style="margin-left: 42vw; width: 50vw;height: 4vh;display: flex;justify-content: space-around;">
					<text
						style=" width: 20vw;height: 4vh;border: solid 1px #F0AD4E;color: #F0AD4E; border-radius: 15px;text-align: center;line-height: 4vh;font-size: 0.6rem;">
						售后申请
					</text>
					<text
						style=" width: 20vw;height: 4vh;background-color: #ff9900;border-radius: 15px;color: #fff;text-align: center;line-height: 4vh;font-size: 0.6rem;">
						催发货
					</text>
				</view>
			</view>
		</view>

		<!-- 输入支付密码 -->

		<uni-popup ref="popup" type="center">
			<view style="width: 94vw;height: 50vh;background-color: #F1F1F1;margin-left: 3vw;border-radius: 10px;position: absolute;top: 50vh;">
			<!-- 标题 -->
			<view style="width: 94vw;height: 5vh;line-height: 5vh;display: flex;border-bottom: solid 1px #ccc;">
				<view style="width: 10vw;height: 5vh;line-height: 5vh;text-align: center;">x</view>
				<view style="width: 82vw;height: 5vh;line-height: 5vh;text-align: center;">请输入支付密码</view>
			</view>
			<!-- 密码输入 -->
			<view style="width: 72vw;margin-left: 12vw; height: 10vh;margin-top: 1vh;display: flex;">
				<view style="width: 11vw;height: 8vh;border: solid 2px #999;text-align: center;line-height: 8vh;" v-for="(item,index) in passwordList" :key="index">
					{{item}}
				</view>
				
			</view>
			<!-- 忘记密码 -->
			<view style="width: 20vw;height: 3vh;margin-left: 70vw;font-size: 0.5rem;color: #007AFF;">忘记密码</view>
			<!-- 按键框 -->
			<view style="width: 94vw;height: 30vh;display: flex;flex-wrap: wrap;">
				<view @click="inputBtn(index)" style="height: 7vh;width: 30vw;border-bottom: solid 1px #ccc;border-right: solid 1px #ccc; text-align: center;line-height: 7vh;" v-for="(item,index) in passwordBtn" :key="index">
					{{item}}
				</view>
				
			</view>
			
			</view>
		</uni-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: 'http://127.0.0.1:3000',
				//头部导航栏分类
				topTypeList: [
					'全部', '待付款', '待发货', '待收货', '待评价', '售后'
				],
				//列表内容数组
				// state状态 0交易成功 1未付款 2 未发货 3 售后申请 4 商家正在处理 5商家已发货
				ordeList: [{
						state: 0,
						image: '../../../static/images/order-img.png',
						content: '简介简介简介简介简介简介简介简介简介简介接纳接简介简介',
						// 价格
						price: '158',
						//数量
						num: 1,
						// 优惠
						preference: '20'

					},
					{
						state: 1,
						image: '../../../static/images/order-img.png',
						content: '简介简介简介简介简介简介简介简介简介简介接纳接简介简介',
						// 价格
						price: '158',
						num: 1,
						// 优惠
						preference: '20'

					}, {
						state: 2,
						image: '../../../static/images/order-img.png',
						content: '简介简介简介简介简介简介简介简介简介简介接纳接简介简介',
						// 价格
						price: '158',
						num: 1,
						// 优惠
						preference: '20'

					},
					{
						state: 0,
						image: '../../../static/images/order-img.png',
						content: '简介简介简介简介简介简介简介简介简介简介接纳接简介简介',
						// 价格
						price: '158',
						num: 1,
						// 优惠
						preference: '20'

					},
					{
						state: 3,
						image: '../../../static/images/order-img.png',
						content: '简介简介简介简介简介简介简介简介简介简介接纳接简介简介',
						// 价格
						price: '158',
						num: 1,
						// 优惠
						preference: '20'

					},
					{
						state: 4,
						image: '../../../static/images/order-img.png',
						content: '简介简介简介简介简介简介简介简介简介简介接纳接简介简介',
						// 价格
						price: '158',
						num: 1,
						// 优惠
						preference: '20'

					},
					{
						state: 5,
						image: '../../../static/images/order-img.png',
						content: '简介简介简介简介简介简介简介简介简介简介接纳接简介简介',
						// 价格
						price: '158',
						num: 1,
						// 优惠
						preference: '20'

					},
				],
				// 输入密码数组
				passwordList:[],
				passwordBtn:['1','2','3','4','5','6','7','8','9','','0','x']
			}
		},
		methods: {
			// 输入密码
			inputBtn(index){
				if(index==11){
					this.passwordList.splice(this.passwordList.length-1,1)
				}else{
					if(this.passwordList.length!==6){
					this.passwordList.push(this.passwordBtn[index])
				}else{
					uni.navigateTo({
						url:'./receiveSuccess'
					})
				}
				
				}
				
				
				
			},

			// 头部点击事件
			TypeBtn(index) {
				console.log(index)
			},
			// 跳转评价详情
			toComment(id) {
				uni.navigateTo({
					url: './comment?id=' + id
				})
			},
			// 交易成功查看物流信息
			successBtnlogistics(id) {
				uni.navigateTo({
					url: './logistics?id=' + id
				})
				console.log(id)
			},
			// 已发货查看物流
			sendShoptnlogistics(id) {
				uni.navigateTo({
					url: './logistics?id=' + id
				})
				console.log(id)
			},
			// 确认收货
			receiveBtn(id) {
				console.log(id)
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('top')
			}
		}
	}
</script>

<style>
	.purchase-center-TopType:hover {
		color: #DD524D;
		border-bottom: solid 2px #DD524D;

	}
</style>
